// 二次封装图表 吧公共的区分出来
<template>
  <!-- 渲染一个图表出来  -->
   <div ref="echart"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
   props:{
    //  判断是否为 第一类折现图/柱状图 还是第二类饼图（只有series属性）
     isAxisChart:{
       type:Boolean,
       default:true
     },
     chartData:{
      //  如果是第一类的话 传过来两个参数
       type:Object,
       default(){
         return{
           xData:[],
           series:[]
         }
       }
     }
   },
   watch:{
    //  监听数据
     chartData:{
        handler:function(){
          this.initChart()
        },
        deep:true
     }
   },
    computed:{
     options(){
      //  判断是柱状图还是折线图还是饼图 
      // 如果isAxisChart存在 就获取折线图和柱状图的配置this.axiosOption
       return this.isAxisChart ?this.axiosOption:this.normalOption
     }
   },
   methods:{
    //  初始化
     initChart(){
      //  调用完 就渲染
       this.initChartData()
       if(this.echart){
        //  如果图表已经渲染了 true
          this.echart.setOption(this.options)
       }else{
        //  没有渲染的话 就要第一次渲染
         this.echart=echarts.init(this.$refs.echart)
         this.echart.setOption(this.options)
        //  this.options判断是否是折线图还是饼图
       }
     },
     initChartData(){
      //  如果是柱状图或者折线图 
       if(this.isAxisChart){
         this.axiosOption.xAxis.data=this.chartData.xData,
         this.axiosOption.series=this.chartData.series
       }else{
        //  如果是饼图
        this.normalOption.series=this.chartData.series
       }
     }
   },
   data(){
     return{
      // 折线图和柱状
          axiosOption:{
            legend: {
          // 图例文字颜色
          textStyle: {
            color: "#333",
          },
        },
        grid: {
          left: "20%",
        },
        // 提示框
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category", // 类目轴
          data: [],
          axisLine: {
            lineStyle: {
              color: "#17b3a3",
            },
          },
          axisLabel: {
            interval: 0,
            color: "#333",
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
          },
        ],
        color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
        series: [],
         tooltip: {},
      },
      // 饼状图
      normalOption:{
         tooltip: {
            trigger: "item",
          },
          color: [
            "#0f78f4",
            "#dd536b",
            "#9462e5",
            "#a6a6a6",
            "#e1bb22",
            "#39c362",
            "#3ed1cf",
          ],
          series: [],
      },
      // 判断e图表有没有渲染
      echart:null
     }
   },
  
}
</script>
